<template>
  <div>
    <div>
      <span>全选</span>
      <input type="checkbox" v-model="isChecked" >
      <button @click="btn">反选</button>
    </div>
    <div>
      <ul>
        <li v-for="(val,index) in arr" :key="index">
          <input type="checkbox" v-model="val.checked">
          {{val.name}}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
 data() {
   return {
     arr: [
        {
          name: "唐僧",
          checked: false,
        },
        {
         name: "孙悟空",
         checked: false,
        },
        {
          name: "猪八戒",
          checked: false,
        },
        {
          name: "沙悟净",
          checked: false,
        },
        {
          name: "白龙马",
          checked: false,
        }
     ]
   }
 },
 computed: {
   isChecked: {
     set(val) {
      //  遍历数组的选中状态使其等于全选的选中状态
       return this.arr.map(item => item.checked = val)
     },
     get() {
      //  遍历数组每一项找到不符合条件的原地返回
       return this.arr.every(item => item.checked == true)
     }
   }
 },
 methods: {
   btn() {
    //  遍历数组的选中状态使其取反
     this.arr.map(item => item.checked = !item.checked )
   }
 }
}
</script>

<style>

</style>